<template>
  <div class="box">
    <p class="box-title">能源系统运营驾驶舱</p>
    <span class="full" @click="info">全屏</span>
    <div class="top-box">
      <div class="top-title"><h1>当日能源消耗统计</h1></div>
      <div class="box1-charts">
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.8vw;width: 33vw" :option="option8" /></div>
        <div>
          <e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 33vw" :option="option9" />
        </div>
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 28vw" :option="option10" /></div>
      </div>
    </div>
    <div class="m-box">
      <div class="box1-title"><h1>月度能源消耗统计</h1></div>
      <div class="box1-charts">
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.8vw;width: 33vw" :option="option1" /></div>
        <div><e-charts autoresize style="height: 27vh;width: 33vw" :option="option2" /></div>
        <div><e-charts autoresize style="height: 27vh;width: 28vw" :option="option11" /></div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="box2">
        <div class="title1"><span>>></span>单台燃动费</div>
        <div>
          <div><e-charts autoresize style="height: 27vh;margin-left: 0.1vw;margin-top:1vh;width: 23vw" :option="option6" /></div>
        </div>
      </div>
      <div class="box3">
        <div class="box2-title" style="margin-top: 1vh"><h1>年度碳排放统计</h1></div>
        <div><e-charts autoresize style="height: 8vh;margin-left: 0.1vw;width: 40vw" :option="option12" /></div>
        <div class="box2-title" style="margin-top: 1vh"><h1>年度产量统计</h1></div>
        <div><e-charts autoresize style="height: 8vh;margin-left: 0.1vw;width: 40vw" :option="option13" /></div>
      </div>
      <div class="box4">
        <div class="title1"><span>>></span>单台能耗</div>
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.1vw;margin-top:1vh;width: 22.6vw" :option="option7" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import screenfull from 'screenfull'
import moment from 'moment'
import API from '@/api/energy/energy'
import Cookies from 'js-cookie'
import DAY from '@/api/energyQuota'
import TARGET from '@/api/energyTarget/energyTarget'
import RECORD from '@/api/energyRecord'
export default {
  data() {
    return {
      dayWaterList: [],
      dayWaterNameList: [],
      dayElectricNameList: [],
      dayElectricList: [],
      dayGasNameList: [],
      monthWaterNameList: [],
      monthElectricNameList: [],
      monthGasNameList: [],
      monthArr: [],
      energyEven: [],
      daySolar: 200,
      dayGasList: [200, 100, 100, 100, 100, 100],
      monthWaterList: [200, 100, 100, 100, 100],
      monthElectricList: [200, 100, 100, 100, 100, 100],
      monthGasList: [200, 100, 100, 100, 100, 100],
      electric: 0,
      gas: 0,
      CO2Month: 0,
      CO2Year: 0,
      scaleCO2: 0,
      GCwater: 0,
      CYwater: 0,
      CSwater: 0,
      TZwater: 0,
      ZZwater: 0,
      DLwater: 0,
      monthGCwater: 0,
      monthCYwater: 0,
      monthCSwater: 0,
      monthTZwater: 0,
      monthZZwater: 0,
      monthDLwater: 0,
      monthGCelectric: 0,
      monthCYelectric: 0,
      monthCSelectric: 0,
      monthTZelectric: 0,
      monthZZelectric: 0,
      monthDLelectric: 0,
      CYvalue: 0,
      monthCYvalue: 0,
      GCelectric: 0,
      CYelectric: 0,
      CSelectric: 0,
      TZelectric: 0,
      ZZelectric: 0,
      DLelectric: 0,
      GCgas: 0,
      STgas: 0,
      GLgas: 0,
      TZgas: 0,
      ZZgas: 0,
      CSgas: 0,
      monthGCgas: 0,
      monthSTgas: 0,
      monthGLgas: 0,
      monthTZgas: 0,
      monthZZgas: 0,
      monthCSgas: 0,
      CYvalueMonth: 0,
      arrMonthF: [],
      arrValueF: [],
      arrValueT: [],
      COyearV: [],
      COyearRecord: [],
      CO1: 0,
      CO2: 0,
      CO3: 0,
      CL: [],
      CLRecord: [],
      C1: 0,
      C2: 0,
      x4: 0,
      evenRecord: []
    }
  },
  computed: {
    option1() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '水定额',
              '水实际'
            ],
            [
              '工厂',
              this.monthGCwater,
              this.monthWaterList[1]
            ],
            [
              '冲压',
              this.monthCYwater,
              this.monthCYvalue
            ],
            [
              '车身',
              this.monthCSwater,
              this.monthWaterList[3]
            ],
            [
              '涂装',
              this.monthTZwater,
              this.monthWaterList[4]
            ],
            [
              '总装',
              this.monthZZwater,
              this.monthWaterList[0]
            ],
            [
              '动力',
              this.monthDLwater,
              this.monthWaterList[2]
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（t）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option2() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '电定额',
              '电实际'
            ],
            [
              '工厂',
              this.monthGCelectric,
              this.monthElectricList[1]
            ],
            [
              '冲压',
              this.monthCYelectric,
              this.monthElectricList[5]
            ],
            [
              '车身',
              this.monthCSelectric,
              this.monthElectricList[2]
            ],
            [
              '涂装',
              this.monthTZelectric,
              this.monthElectricList[4]
            ],
            [
              '总装',
              this.monthZZelectric,
              this.monthElectricList[0]
            ],
            [
              '动力',
              this.monthDLelectric,
              this.monthElectricList[3]
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（kwh）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          }
        ]
      }
    },
    option3() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '碳排放实际'
            ],
            [
              '工厂',
              this.CO2Month
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（t）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'm³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' m³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          }
        ]
      }
    },
    option4() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'product',
              '水',
              '电',
              '天然气'
            ],
            [
              '工厂',
              110,
              100,
              90
            ],
            [
              '冲压车间',
              60,
              100,
              80
            ],
            [
              '车身车间',
              48.11,
              83.89,
              70
            ],
            [
              '涂装车间',
              118.07,
              77.11,
              64.82
            ],
            [
              '总装车间',
              117.14,
              92.86,
              75
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '消耗量',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' m³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          }
        ]
      }
    },
    option5() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false }
        },
        yAxis: {
          type: 'category',
          data: ['光伏'],
          splitLine: { show: false },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        legend: {
          right: 1000,
          top: 'center'
        },
        series: [
          {
            name: '当日光伏发电量',
            type: 'bar',
            data: [1888],
            barWidth: 28,
            itemStyle: {
              normal: {
                color: '#affdcf'
              }
            }

          }
        ]
      }
    },
    option6() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              interval: 1,
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            data: this.arrMonthF
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            name: '工厂（元/台）',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 0,
            position: 'left',
            offset: 110,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
            }
          },
          {
            type: 'value',
            name: '指标（元/台）',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: {
            }
          }
        ],
        series: [
          {
            name: '工厂',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 元/台'
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                },
                label: {
                  show: false,
                  // position: 'middle',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            data: this.arrValueT
          },
          {
            name: '指标',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 元/台'
              }
            },
            yAxisIndex: 2,
            itemStyle: {
              color: 'red'
            },
            data: this.arrValueF
          }
        ]
      }
    },
    option7() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              interval: 1,
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            data: this.arrMonthF
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 1000,
            name: '工厂（kgce）/台',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 0,
            position: 'left',
            offset: 110,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
            }
          },
          {
            type: 'value',
            name: '指标（kgce）/台',
            position: 'left',
            min: 0,
            max: 1000,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: {
            }
          }
        ],
        series: [
          {
            name: '工厂',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' kgce/台'
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                },
                label: {
                  show: false,
                  // position: 'middle',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            data: this.evenRecord
          },
          {
            name: '指标',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' tce/台'
              }
            },
            yAxisIndex: 2,
            itemStyle: {
              color: 'red'
            },
            data: this.energyEven
          }
        ]
      }
    },
    option8() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '水定额',
              '水实际'
            ],
            [
              '工厂',
              this.GCwater,
              this.dayWaterList[1]
            ],
            [
              '冲压',
              this.CYwater,
              this.CYvalue
            ],
            [
              '车身',
              this.CSwater,
              this.dayWaterList[3]
            ],
            [
              '涂装',
              this.TZwater,
              this.dayWaterList[4]
            ],
            [
              '总装',
              this.ZZwater,
              this.dayWaterList[0]
            ],
            [
              '动力',
              this.DLwater,
              this.dayWaterList[2]
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（t）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option9() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '电定额',
              '电实际'
            ],
            [
              '工厂',
              this.GCelectric,
              this.dayElectricList[1]
            ],
            [
              '冲压',
              this.CYelectric,
              this.dayElectricList[5]
            ],
            [
              '车身',
              this.CSelectric,
              this.dayElectricList[2]
            ],
            [
              '涂装',
              this.TZelectric,
              this.dayElectricList[4]
            ],
            [
              '总装',
              this.ZZelectric,
              this.dayElectricList[0]
            ],
            [
              '动力 ',
              this.DLelectric,
              this.dayElectricList[3]
            ],
            [
              '光伏',
              0,
              this.daySolar
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（kwh）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          }
        ]
      }
    },
    option10() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '天然气定额',
              '天然气实际'
            ],
            [
              '工厂',
              this.GCgas,
              this.dayGasList[1]
            ],
            [
              '车身',
              this.CSgas,
              this.dayGasList[2]
            ],
            [
              '涂装',
              this.TZgas,
              this.dayGasList[0]
            ],
            [
              '总装',
              this.ZZgas,
              this.dayGasList[3]
            ],
            [
              '锅炉',
              this.GLgas,
              this.dayGasList[5]
            ],
            [
              '食堂',
              this.STgas,
              this.dayGasList[4]
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（m³）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'm³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' m³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          }
        ]
      }
    },
    option11() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '天然气定额',
              '天然气实际'
            ],
            [
              '工厂',
              this.monthGCgas,
              this.monthGasList[1]
            ],
            [
              '车身',
              this.monthCSgas,
              this.monthGasList[2]
            ],
            [
              '涂装',
              this.monthTZgas,
              this.monthGasList[0]
            ],
            [
              '总装',
              this.monthZZgas,
              this.monthGasList[3]
            ],
            [
              '锅炉',
              this.monthGLgas,
              this.monthGasList[5]
            ],
            [
              '食堂',
              this.monthSTgas,
              this.monthGasList[4]
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（m³）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'm³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' m³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          }
        ]
      }
    },
    option12() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          right: 'right',
          padding: [1000, 50, 0, 0]
        },
        grid: {
          right: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['']
        },
        series: [
          {
            name: '实际',
            type: 'bar',
            barWidth: '60%',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              // formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
              //   if (params.value) { // 如果当前值存在则拼接
              //     return '实际' + params.value + 't' + '占年度指标' + this.scaleCO2 + '%'
              //   } else { // 否则返回个空
              //     return ''
              //   }
              // },
              formatter: params => { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '实际' + params.value + 't' + '占年度指标' + this.CO3 + '%'
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.COyearRecord
          },
          {
            name: '年度',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '       ' + '年度指标' + params.value + 't'
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.COyearV
          }
        ]
      }
    },
    option13() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          right: 'right',
          padding: [1000, 50, 0, 0]
        },
        grid: {
          right: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['']
        },
        series: [
          {
            name: '实际',
            type: 'bar',
            barWidth: '60%',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              // formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
              //   if (params.value) { // 如果当前值存在则拼接
              //     return '实际' + params.value + 't' + '占年度指标' + this.scaleCO2 + '%'
              //   } else { // 否则返回个空
              //     return ''
              //   }
              // },
              formatter: params => { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '实际' + params.value + '台' + '占年度指标' + this.x4 + '%'
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.CLRecord
          },
          {
            name: '年度',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '       ' + '年度指标' + params.value + 't'
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.CL
          }
        ]
      }
    }
  },
  created() {
    this.login()
    this.target()
  },
  methods: {
    info() {
      screenfull.toggle()
      this.$router.push('/energy/nengyuan')
    },
    login() {
      const data = { password: 'Gy12345678!', username: 'gy_operation' }
      API.login(data).then(res => {
        console.log(res)
        const TokenKey = 'energy-Token'
        const energyToken = res.result.token
        Cookies.set(TokenKey, energyToken)
      }).finally(() => {
        this.index()
        setTimeout(() => {
          this.login()
        },300000)
      })
    },
    index() {
      const startDay = new Date(new Date().toLocaleDateString()).getTime() // 当天0点
      const endDay = (new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)// 当天23:59
      const startTime = moment(startDay).format('YYYY-MM-DD HH:mm:ss')
      const endTime = moment(endDay).format('YYYY-MM-DD HH:mm:ss')
      const monthDate = new Date().getMonth() + 1
      const year = new Date().getFullYear()
      const startMonth = year + '-' + '0' + monthDate + '-01' + ' ' + '00:00:00'
      let endMonth = ''
      if (monthDate === 2) {
        endMonth = year + '-' + '0' + monthDate + '-28' + ' ' + '23:59:00'
      } else if (monthDate === 4 || monthDate === 6 || monthDate === 9) {
        endMonth = year + '-' + '0' + monthDate + '-30' + ' ' + '23:59:00'
      } else if (monthDate === 11) {
        endMonth = year + '-' + monthDate + '-30' + ' ' + '23:59:00'
      } else if (monthDate === 12 || monthDate === 10) {
        endMonth = year + '-' + monthDate + '-31' + ' ' + '23:59:00'
      } else {
        endMonth = year + '-' + '0' + monthDate + '-31' + ' ' + '23:59:00'
      }
      this.getDayWater(startTime, endTime)
      this.getDayElectric(startTime, endTime)
      this.getDayGas(startTime, endTime)
      this.getMonthGas(startMonth, endMonth)
      this.getMonthElectric(startMonth, endMonth)
      this.getMonthWater(startMonth, endMonth)
      this.getSolar(startTime, endTime)
    },
    target() {
      this.dayWater()
      this.dayE()
      this.gasD()
      this.monthWater()
      this.eM()
      this.monthGas()
      this.fire()
      this.yearV2()
      this.yearV()
      this.even()
    },
    getDayWater(startTime, endTime) {
      const waterData = {
        startDate: startTime,
        endDate: endTime,
        emodelId: '1636565362844717058,1596133880003297281,1596133639350910977,1596132955402534913,1636565586342400001',
        energyId: '312060c20a1e02949b3ebe1721d93d92', // 水能源
        timeCategory: 'day'
      }
      const data = {
        startDate: startTime,
        endDate: endTime,
        emodelId: '1636564579411644417',
        energyId: '312060c20a1e02949b3ebe1721d93d92',
        timeCategory: 'day'
      }
      API.getList(waterData).then(res => {
        const list = res.data
        this.dayWaterList = []
        this.dayWaterNameList = []
        list.forEach(item => {
          this.dayWaterList.push(item.value)
        })
      })
      API.getList(data).then(res => {
        if (res.data.length > 0) {
          this.CYvalue = res.data[0].value
        }
      })
    },
    dayWater() {
      const data = {
        type: 1,
        today: 1
      }
      DAY.getList(data).then(res => {
        const list = res.data.data
        if (res.data.data.length > 0) {
          list.forEach(item => {
            if (item.workshop === '工厂') {
              this.GCwater = item.v
            } else if (item.workshop === '冲压车间') {
              this.CYwater = item.v
            } else if (item.workshop === '车身车间') {
              this.CSwater = item.v
            } else if (item.workshop === '涂装车间') {
              this.TZwater = item.v
            } else if (item.workshop === '总装车间') {
              this.ZZwater = item.v
            } else if (item.workshop === '动力中心') {
              this.DLwater = item.v
            }
          })
        }
      })
    },
    getDayElectric(startTime, endTime) {
      console.log('获取电（当日）')
      const data = {
        startDate: startTime,
        endDate: endTime,
        emodelId: '1636564579411644417,1636565362844717058,1596133880003297281,1596133639350910977,1636565586342400001,1596132955402534913', // 位置id
        energyId: 'SU035', // 能源id
        timeCategory: 'day'
      }
      API.getList(data).then(res => {
        const list = res.data
        this.dayElectricList = []
        list.forEach(item => {
          this.dayElectricList.push(item.value)
        })
      })
    },
    dayE() {
      const data = {
        type: 2,
        today: 1
      }
      DAY.getList(data).then(res => {
        const list = res.data.data
        if (res.data.data.length) {
          list.forEach(item => {
            if (item.workshop === '工厂') {
              this.GCelectric = item.v
            } else if (item.workshop === '冲压车间') {
              this.CYelectric = item.v
            } else if (item.workshop === '车身车间') {
              this.CSelectric = item.v
            } else if (item.workshop === '涂装车间') {
              this.TZelectric = item.v
            } else if (item.workshop === '总装车间') {
              this.ZZelectric = item.v
            } else if (item.workshop === '动力中心') {
              this.DLelectric = item.v
            }
          })
        }
      })
    },
    getSolar(startTime, endTime) {
      console.log(startTime, endTime)
      const data = {
        startDate: startTime,
        endDate: endTime,
        energyId: '8e3edca4d40c6111b3b154807c93b0aa', // 光伏
        timeCategory: 'day'
      }
      API.getList(data).then(res => {
        if (res.data.length > 0) {
          this.daySolar = res.data[0].value
        }
      })
    },
    getDayGas(startTime, endTime) {
      console.log('获取天然气（当日）')
      const data = {
        startDate: startTime,
        endDate: endTime,
        emodelId: '1636565362844717058,1596133880003297281,1596133639350910977,1637119161091047425,1643980971563892737,1596132955402534913', // 位置id
        energyId: 'SU017', // 能源id
        timeCategory: 'day'
      }
      API.getList(data).then(res => {
        const list = res.data
        this.dayGasList = []
        list.forEach(item => {
          this.dayGasList.push(item.value)
        })
      })
    },
    gasD() {
      const data = {
        type: 3,
        today: 1
      }
      DAY.getList(data).then(res => {
        const list = res.data.data
        if (res.data.data.length > 0) {
          list.forEach(item => {
            if (item.workshop === '工厂') {
              this.GCgas = item.v
            } else if (item.workshop === '锅炉') {
              this.GLgas = item.v
            } else if (item.workshop === '车身车间') {
              this.CSgas = item.v
            } else if (item.workshop === '涂装车间') {
              this.TZgas = item.v
            } else if (item.workshop === '总装车间') {
              this.ZZgas = item.v
            } else if (item.workshop === '食堂') {
              this.STgas = item.v
            }
          })
        }
      })
    },
    getMonthWater(startMonth, endMonth) {
      console.log('获取水（月）')
      const data = {
        startDate: startMonth,
        endDate: endMonth,
        emodelId: '1636565362844717058,1596133880003297281,1596133639350910977,1596132955402534913,1636565586342400001', // 位置id
        energyId: '312060c20a1e02949b3ebe1721d93d92', // 能源id
        timeCategory: 'month'
      }
      const data1 = {
        startDate: startMonth,
        endDate: endMonth,
        emodelId: '1636564579411644417',
        energyId: '312060c20a1e02949b3ebe1721d93d92',
        timeCategory: 'month'
      }
      API.getList(data).then(res => {
        const list = res.data
        this.monthWaterList = []
        list.forEach(item => {
          this.monthWaterList.push(item.value)
          this.monthWaterNameList.push(item.emodelName)
        })
      })
      API.getList(data1).then(res => {
        if (res.data.length > 0) {
          this.monthCYvalue = res.data[0].value
        }
      })
    },
    monthWater() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const data = {
        category_id: 1,
        year,
        month
      }
      TARGET.getList(data).then(res => {
        const list = res.data.data
        if (res.data.data.length > 0) {
          list.forEach(item => {
            if (item.workshop === '工厂') {
              this.monthGCwater = item.v
            } else if (item.workshop === '冲压车间') {
              this.monthCYwater = item.v
            } else if (item.workshop === '车身车间') {
              this.monthCSwater = item.v
            } else if (item.workshop === '涂装车间') {
              this.monthTZwater = item.v
            } else if (item.workshop === '总装车间') {
              this.monthZZwater = item.v
            } else if (item.workshop === '动力中心') {
              this.monthDLwater = item.v
            }
          })
        }
      })
    },
    getMonthElectric(startMonth, endMonth) {
      console.log('获取电（月）')
      const data = {
        startDate: startMonth,
        endDate: endMonth,
        emodelId: '1636564579411644417,1636565362844717058,1596133880003297281,1596133639350910977,1636565586342400001,1596132955402534913', // 位置id
        energyId: 'SU035', // 能源id
        timeCategory: 'month'
      }
      API.getList(data).then(res => {
        const list = res.data
        this.monthElectricList = []
        list.forEach(item => {
          this.monthElectricList.push(item.value)
        })
      })
    },
    eM() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const data = {
        category_id: 2,
        year,
        month
      }
      TARGET.getList(data).then(res => {
        const list = res.data.data
        console.log(list)
        if (res.data.data.length > 0) {
          list.forEach(item => {
            if (item.workshop === '工厂') {
              this.monthGCelectric = item.v
            } else if (item.workshop === '冲压车间') {
              this.monthCYelectric = item.v
            } else if (item.workshop === '车身车间') {
              this.monthCSelectric = item.v
            } else if (item.workshop === '涂装车间') {
              this.monthTZelectric = item.v
            } else if (item.workshop === '总装车间') {
              this.monthZZelectric = item.v
            } else if (item.workshop === '动力中心') {
              this.monthDLelectric = item.v
            }
          })
        }
      })
    },
    getMonthGas(startMonth, endMonth) {
      console.log('获取天然气（月）')
      const data = {
        startDate: startMonth,
        endDate: endMonth,
        emodelId: '1636565362844717058,1596133880003297281,1596133639350910977,1637119161091047425,1643980971563892737,1596132955402534913', // 位置id
        energyId: 'SU017', // 能源id
        timeCategory: 'month'
      }
      API.getList(data).then(res => {
        console.log(res.data, 79)
        const list = res.data
        this.monthGasList = []
        list.forEach(item => {
          this.monthGasList.push(item.value)
        })
      })
    },
    monthGas() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const data = {
        category_id: 3,
        year,
        month
      }
      TARGET.getList(data).then(res => {
        const list = res.data.data
        if (res.data.data.length > 0) {
          list.forEach(item => {
            if (item.workshop === '工厂') {
              this.monthGCgas = item.v
            } else if (item.workshop === '锅炉房') {
              this.monthGLgas = item.v
            } else if (item.workshop === '车身车间') {
              this.monthCSgas = item.v
            } else if (item.workshop === '涂装车间') {
              this.monthTZgas = item.v
            } else if (item.workshop === '总装车间') {
              this.monthZZgas = item.v
            } else if (item.workshop === '食堂') {
              this.monthSTgas = item.v
            }
          })
        }
      })
    },
    fire() {
      const date = new Date()
      const year = date.getFullYear()
      const data = {
        category_id: 5,
        year,
        order: 'month'
      }
      const data1 = {
        category_id: 4,
        year,
        order: 'month'
      }
      TARGET.getList(data).then(res => {
        const list = res.data.data
        this.arrMonthF = []
        this.arrValueF = []
        list.forEach(item => {
          this.arrMonthF.push(item.month)
          this.arrValueF.push(item.v)
        })
      })
      RECORD.getList(data1).then(res => {
        const list = res.data.data
        this.arrValueT = []
        list.forEach(item => {
          this.arrValueT.push(item.v)
        })
      })
    },
    yearV() {
      const date = new Date()
      const year = date.getFullYear()
      const data = {
        year,
        category_id: 10
      }
      const data2 = {
        year,
        category_id: 11
      }
      TARGET.getList(data).then(res => {
        const list = res.data.data
        this.CL.push(list[0].v)
        this.C1 = list[0].v
      }).finally(() => {
        RECORD.getList(data2).then(res => {
          const list = res.data.data
          this.CLRecord.push(list[0].v)
          this.C2 = list[0].v
        }).finally(() => {
          const num = (this.C2 / this.C1) * 100
          this.x4 = num.toFixed(2)
        })
      })
    },
    yearV2() {
      const date = new Date()
      const year = date.getFullYear()
      const data = {
        year,
        category_id: 8
      }
      const data2 = {
        year,
        category_id: 9
      }
      TARGET.getList(data).then(res => {
        if (res.data.data.length > 0) {
          const list = res.data.data
          this.COyearV.push(list[0].v)
          this.CO1 = list[0].v
        }
      }).finally(() => {
        RECORD.getList(data2).then(res => {
          const list = res.data.data
          this.COyearRecord.push(list[0].v)
          this.CO2 = list[0].v
        }).finally(() => {
          const num = (this.CO2 / this.CO1) * 100
          this.CO3 = num.toFixed(2)
        })
      })
    },
    even() {
      const date = new Date()
      const year = date.getFullYear()
      const data = {
        category_id: 7,
        year,
        order: 'month'
      }
      const data1 = {
        category_id: 6,
        year,
        order: 'month'
      }
      TARGET.getList(data).then(res => {
        console.log(res.data.data, 111)
        const list = res.data.data
        list.forEach(item => {
          this.energyEven.push(item.v)
        })
      })
      RECORD.getList(data1).then(res => {
        const list = res.data.data
        list.forEach(item => {
          this.evenRecord.push(item.v)
        })
      })
    }
  }
}
</script>

<style scoped>
  .box{
    width: 100%;
    height: calc(100vh - 50px);
    background-image: url("../../assets/charts-bg.jpg");
    background-size: 100% 100%;
    background-color: #0c1330;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  .box-title{
    font-size: 28px;
    color: #00deff;
    text-align: center;
  }

  .bottom-box{
    width: 98%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .box2{
    width: 25%;
    height: 26vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box3{
    width:49%;
    height: 26vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box4{
    width: 25%;
    height: 26vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box5{
    width: 24%;
    height: 26vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box1-title h1{
    color: #fff;
    text-align: center;
    font-size: 14px;
    margin-top: 8px;
  }
  .box2-title h1{
    color: #fff;
    text-align: center;
    font-size: 16px;
    padding-top: 4px;
  }
  .top-title h1{
    color: #fff;
    text-align: center;
    font-size: 16px;
  }
  .box1-charts{
    display: flex;
    justify-content: space-evenly;
  }
  .title1{
    color: #00deff;
    margin-left: 8px;
    font-size: 16px;
    margin-top: 8px;
  }
  .top-box{
    width: 98%;
    height:28vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/box1.png");
    margin: 0 auto;
    overflow: hidden;
  }
  .m-box{
    width: 98%;
    height: 28vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-image: url("../../assets/box1.png");
    overflow: hidden;
  }
  .charts-txt p{
    color: #fff;
    text-align: center;
    font-size: 15px;
  }
  .charts-txt span {
    color: #00deff;
    font-size: 15px;
  }
  .full{
    position: fixed;
    cursor:pointer;
    color: #00deff;
    font-size: 14px;
    border: 1px solid #00deff;
    padding: 3px 10px;
    margin-left: 1vw;
    margin-top: -30px;
    width: 50px;
  }
</style>
<style>
  .handle-button{
    display: block;
  }
</style>
